import { Form, Input, Collapse } from 'antd';
import React, { useContext } from 'react';
import '../common/styles.less';
import { VersionManageContext } from '../common/useManageContext';
import { SearchOutlined, ReloadOutlined } from '@ant-design/icons';
import { VersionViewAPI } from '../common/type';
import _ from 'lodash';
const { Panel } = Collapse;

export const VersionInput: React.FC<VersionViewAPI.IVersionInput> = ({ refreshRequest }) => {
  const { prefixCls } = useContext(VersionManageContext);

  const [form] = Form.useForm();

  /** 点击搜索重置按钮 */
  const onReload = () => {
    /**置空输入框 */
    form?.setFieldsValue({
      upgradeNote: '',
    });
    let params = {
      isPublics: '1,2', //只需返回发布上线&历史版本的数据
      versionType: 2, //PC端
    };
    refreshRequest(params);
  };

  /** 点击搜索提交按钮 */
  const onSearchValueChanage = (e: any) => {
    let params = {
      upgradeNote: e.target.value,
      isPublics: '1,2', //只需返回发布上线&历史版本的数据
      versionType: 2, //PC端
    };
    refreshRequest(params);
  };

  /**回车事件 */
  // const keyupSubmit = (e:any) => {
  //   var evt = window.event || e;
  //   if (evt.keyCode == 13){
  //      let params = {
  //       upgradeNote: e.target.value,
  //       isPublics: '1,2', //只需返回发布上线&历史版本的数据
  //       versionType: 2, //PC端
  //     };
  //     refreshRequest(params);
  //    }
  // }

  return (
    <>
      <Form
        form={form}
        className={prefixCls + 'versionform'}
        onValuesChange={(changedValues, allValues) => {
          if (!changedValues?.upgradeNote) {
            onReload();
          }
        }}
      >
        <Form.Item name="upgradeNote">
          <Input
            suffix={<SearchOutlined />}
            onChange={onSearchValueChanage}
            onPressEnter={onSearchValueChanage}
            placeholder="请按升级内容搜索"
            allowClear={true}
            addonAfter={
              <span onClick={onReload}>
                <ReloadOutlined />
              </span>
            }
          />
          {/* <div className="btn-box mb20">
                <span className='searchBtn' onClick={onSearchValueChanage}>
                    <SearchOutlined />
                  </span>
                  <span className='reloadBtn' onClick={onReload}>
                    <ReloadOutlined />
                  </span>
                <input type="text" placeholder="按升级内容搜索" onKeyDown={keyupSubmit}/>
            </div> */}
        </Form.Item>
      </Form>
    </>
  );
};
